<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Popup File Upload with Progress Bar</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            position: relative;
        }

        #overlay2 {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        #popup {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 400px; /* 设置固定宽度 */
            max-width: 100%; /* 确保宽度不超过屏幕宽度 */
            overflow: auto; /* 添加滚动条以便内容超出时可以滚动 */
        }

        .radio-group {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        .radio-group label {
            margin-right: 10px;
        }

        .hidden {
            display: none;
        }

        #fileOptions {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }

        #fileInput {
            display: none;
            margin-left: 10px;
        }

        /* 拖动相关样式 */
        #popup-header {
            cursor: move;
            background-color: #f0f0f0;
            padding: 10px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            margin-bottom: 10px;
        }

        /* 结果类型样式 */
        #resultTypeOptions {
            margin-bottom: 10px;
        }

        /* 按钮样式 */
        #uploadButton, #closeButton {
            background-color: #5cb85c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }

        #uploadButton:hover, #closeButton:hover {
            background-color: #4cae4c;
        }

        /* 进度条样式 */
        #progressBar {
            width: 100%;
            height: 20px;
            background-color: #f0f0f0;
            border-radius: 4px;
            margin-top: 10px;
            overflow: hidden;
        }

        #progressBar div {
            height: 100%;
            background-color: #4cae4c;
            width: 0%;
        }
    </style>
</head>
<body>

<button id="openPopup">选择下载接口</button>

<div id="overlay2">
    <div id="popup">
        <div id="popup-header">下载接口</div>
        <div class="radio-group">
            <input type="radio" id="radioOption1" name="resultType" value="order" checked>
            <label for="radioOption1">最新订单</label>
            <div id="templateOptions1" class="hidden">
                <input type="radio" id="template1" name="template" value="template1" checked>
                <label for="template1">模板1</label>
                <input type="radio" id="template2" name="template" value="template2">
                <label for="template2">模板2</label>
            </div>
        </div>
        <div class="radio-group">
            <input type="radio" id="radioOption2" name="resultType" value="estimatedOrders">
            <label for="radioOption2">预计订单</label>
            <div id="templateOptions2" class="hidden">
                <input type="radio" id="template3" name="template" value="template1" checked>
                <label for="template3">模板1</label>
                <input type="radio" id="template4" name="template" value="template2">
                <label for="template4">模板2</label>
            </div>
        </div>
        <div class="radio-group">
            <input type="radio" id="radioOption3" name="resultType" value="allSmokeList">
            <label for="radioOption3">所有卷烟列表</label>
            <div id="templateOptions3" class="hidden">
                <input type="radio" id="template5" name="template" value="template1" checked>
                <label for="template5">模板1</label>
                <input type="radio" id="template6" name="template" value="template2">
                <label for="template6">模板2</label>
            </div>
        </div>
        <h3>是否选择文件</h3>
        <hr>
        <div id="fileOptions" class="hidden">
            <input type="radio" id="fileYes" name="fileChoice" value="yes" checked>
            <label for="fileYes">是</label>
            <input type="radio" id="fileNo" name="fileChoice" value="no">
            <label for="fileNo">否</label>
            <input type="file" id="fileInput" name="file" class="hidden">
        </div>

        <div id="resultTypeOptions">
            <h3>结果类型</h3>
            <div class="radio-group">
                <input type="radio" id="opImage" name="resultType1" value="image" checked>
                <label for="opImage">图片(jpg)</label>
            </div>
            <div class="radio-group">
                <input type="radio" id="opForm" name="resultType1" value="form">
                <label for="opForm">表格(xls)</label>
            </div>
        </div>

        <button id="uploadButton">开始下载</button>
        <button id="closeButton">关闭</button>
        <div id="progressBar">
            <div></div>
        </div>
    </div>
</div>

<script>
    document.getElementById('openPopup').addEventListener('click', function () {
        document.getElementById('overlay2').style.display = 'block';
        updateTemplateOptions();
        updateFileOptions();
    });

    document.getElementById('closeButton').addEventListener('click', function () {
        document.getElementById('overlay2').style.display = 'none';
    });

    document.querySelectorAll('input[name="resultType"]').forEach(function (radio) {
        radio.addEventListener('change', function () {
            updateTemplateOptions();
            updateFileOptions();
        });
    });

    document.querySelectorAll('input[name="fileChoice"]').forEach(function (radio) {
        radio.addEventListener('change', function () {
            updateFileInput();
        });
    });

    function updateTemplateOptions() {
        var templateOptions1 = document.getElementById('templateOptions1');
        var templateOptions2 = document.getElementById('templateOptions2');
        var templateOptions3 = document.getElementById('templateOptions3');

        if (document.getElementById('radioOption1').checked) {
            templateOptions1.style.display = 'flex';
            templateOptions2.style.display = 'none';
            templateOptions3.style.display = 'none';
        } else if (document.getElementById('radioOption2').checked) {
            templateOptions1.style.display = 'none';
            templateOptions2.style.display = 'flex';
            templateOptions3.style.display = 'none';
        } else if (document.getElementById('radioOption3').checked) {
            templateOptions1.style.display = 'none';
            templateOptions2.style.display = 'none';
            templateOptions3.style.display = 'flex';
        }
    }

    function updateFileOptions() {
        var fileOptions = document.getElementById('fileOptions');

        if (document.getElementById('radioOption1').checked || document.getElementById('radioOption2').checked) {
            fileOptions.style.display = 'flex';
        } else {
            fileOptions.style.display = 'none';
            document.getElementById('fileInput').style.display = 'none';
        }

        updateFileInput(); // 确保文件输入框的显示状态更新
    }

    function updateFileInput() {
        var fileInput = document.getElementById('fileInput');

        if ((document.getElementById('radioOption1').checked || document.getElementById('radioOption2').checked) && document.getElementById('fileYes').checked) {
            fileInput.style.display = 'block';
        } else {
            fileInput.style.display = 'none';
        }
    }

    document.getElementById('uploadButton').addEventListener('click', function () {
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0];
        if (file) {
            var formData = new FormData();
            formData.append('file', file);
            var resultType = document.querySelector('input[name="resultType"]:checked').value;
            var template = document.querySelector('input[name="template"]:checked').value;
            var fileChoice = document.querySelector('input[name="fileChoice"]:checked').value;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload?resultType=' + resultType + '&template=' + template + '&fileChoice=' + fileChoice, true);

            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    document.getElementById('progressBar').querySelector('div').style.width = percentComplete + '%';
                }
            };

            xhr.onload = function () {
                if (xhr.status === 200) {
                    document.getElementById('progressBar').querySelector('div').style.width = '100%';
                    alert('File uploaded successfully: ' + xhr.responseText);
                } else {
                    alert('Error in file upload.');
                }
            };

            xhr.onerror = function () {
                alert('Error in file upload.');
            };

            xhr.send(formData);
        } else if (document.getElementById('fileYes').checked) {
            alert('No file selected.');
        } else {
            // 如果选择“否”，则不上传文件，直接提交
            var resultType = document.querySelector('input[name="resultType"]:checked').value;
            var template = document.querySelector('input[name="template"]:checked').value;
            var fileChoice = document.querySelector('input[name="fileChoice"]:checked').value;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload?resultType=' + resultType + '&template=' + template + '&fileChoice=' + fileChoice, true);

            xhr.onload = function () {
                if (xhr.status === 200) {
                    alert('Download initiated successfully: ' + xhr.responseText);
                } else {
                    alert('Error in initiating download.');
                }
            };

            xhr.onerror = function () {
                alert('Error in initiating download.');
            };

            xhr.send();
        }
    });

    // 拖动功能
    var popup = document.getElementById('popup');
    var popupHeader = document.getElementById('popup-header');
    var isDragging = false;
    var offsetX, offsetY;

    popupHeader.addEventListener('mousedown', function (e) {
        isDragging = true;
        offsetX = e.clientX - popup.offsetLeft;
        offsetY = e.clientY - popup.offsetTop;
    });

    document.addEventListener('mousemove', function (e) {
        if (isDragging) {
            popup.style.left = (e.clientX - offsetX) + 'px';
            popup.style.top = (e.clientY - offsetY) + 'px';
        }
    });

    document.addEventListener('mouseup', function () {
        isDragging = false;
    });
</script>

</body>
</html>
